<template>
	<div id="charge_standard_add_edit" class="dialog animated"  :class="open? 'fadeIn':'fadeOut'"
		 v-show="show" :style="{visibility:(visible?'visible':'hidden')}">
		<div class="panel animated" :class="open? 'zoomIn':''">
			<div class="title">
				{{isAdd? '新增收费标准' : '编辑收费标准'}}
				<div class="close" @click="cancel()"></div>
			</div>
			<div class="form">
				<div class="row">
					<label class="label">
						<span>*</span>
						类型名称
					</label>
					<el-input v-model="param.name" id="name" style="width: 4rem;" maxLength="20"
						 placeholder="请输入收费标准名称" clearable></el-input>
					<div class="explain">
						例：标准【2000元/月】<br />
						支持1-20个汉字，字母，数字和/【】()-_符号的输入
					</div>
				</div>
				<div class="row">
					<label class="label">
						<span>*</span>
						收费类型
					</label>
					<el-select v-model="param.paymentTypeId" id="paymentTypeId" style="width: 2.22rem;" placeholder="请选择">
					    <el-option v-for="item in chargeTypeList" :key="item.paymentTypeId"
					      :label="item.name" :value="item.paymentTypeId">
					    </el-option>
				  	</el-select>
				</div>
				<div class="row">
					<label class="label">
						<span>*</span>
						收费方式
					</label>
					<el-radio-group v-model="param.paymentMode" class="radio">
					    <el-radio v-for="item in chargeWay" :label="item.value" :key="item.value">
					    	{{item.name}}
					    </el-radio>
					</el-radio-group>
				</div>
				<template v-if="param.paymentMode == 1">
					<div class="row">
						<label class="label">
							<span>*</span>
							月收费
						</label>
						￥
						<el-input-number v-model="param.monthPrice" id="monthPrice" controls-position="right"
						 	:min="0" :max="999999999" size="small" :precision="precision" style="width: 2rem;">
						</el-input-number>
						&nbsp;元
					</div>
					<div class="row">
						<label class="label">
							日单价
						</label>
						￥
						 <el-input-number v-model="param.dayPrice" id="dayPrice" controls-position="right"
						 	:min="0" :max="999999999" size="small" :precision="precision" style="width: 2rem;">
						 </el-input-number>
						 元
					</div>
				</template>
				<div  v-else class="row">
					<label class="label">
						<span>*</span>
						收费
					</label>
					￥
					 <el-input-number v-model="param.price" id="price" controls-position="right"
					 	:min="0" :max="999999999" size="small" :precision="precision" style="width: 2rem;">
					 </el-input-number>
					 &nbsp;元
				</div>
				
				<div class="row">
					<label class="label">
						状态
					</label>
					<el-checkbox v-model="param.isUse">是否启用</el-checkbox>
				</div>
			</div>
			<div class="btn_div">
				<div class="btn_sure" @click="sure()">确 认</div>
				<div class="btn_cancel" @click="cancel()">取 消</div>
			</div>
		</div>
	
	</div>
</template>

<script>
var vm,dict;
var param = {
	name : "",
	paymentTypeId : "",
	paymentMode : 1, 
	monthPrice : "",
	dayPrice : null,
	price : "",
	isUse : true,
	campusId : "",
	_wait : ""
}
export default {
	data : function() {
		return {
			show : false,
			open : false,
			visible : false,
			param : tool.clone(param),
			isAdd : true,
			chargeWay : null,//收费方式
			chargeTypeList : null,
			campusId : null,
			precision : 2
		}
	},
	methods : {
		init : function(standard) {
			vm.show = true;
			setTimeout(function() { 
				vm.open = true; 
				vm.visible = true;
			},1);
			
			vm.isAdd = (standard? false : true);
			//获取校区列表
			let campusId = vm.$store.state.campusId;
			if(vm.campusId != campusId) {
				//校区更改,重新加载数据
				vm.campusId = campusId;
				vm.loadList();
			}
			
			//有传收费类型对象,则是编辑,否则新增
			if(standard) {
				vm.param = tool.clone(standard);
				//转换启用字段
				vm.param.isUse = (vm.param.isUse == 1);
				vm.param._wait = "";
			} else {
				vm.param = tool.clone(param);
				vm.param.campusId = campusId;
			}
			
			
		},
		cancel : function() {
			vm.open = false;
			setTimeout(function() {
				vm.show = false;
				vm.visible = false;
			},500);
		},
		sure : function() {
			let p = tool.clone(vm.param);
			
			//验证规则
			var rules = [{
				judge : /^[0-9a-zA-Z\u4E00-\u9FA5/【】（）_-]{1,20}$/.test(p.name),
				focus : $("#charge_standard_add_edit #name"),
				tips : "请输入1-20位由字母汉字数字/【】（）_-组成的名称"
			}, {
				judge : p.paymentTypeId,
				focus : $("#charge_standard_add_edit #paymentTypeId"),
				tips : "请选择收费类型"
			}, {
				judge : p.paymentMode == 2 || p.monthPrice != null,
				focus : $("#charge_standard_add_edit #monthPrice"),
				tips : "请输入月收费"
			}, {
				judge : p.paymentMode == 1 || p.price != null,
				focus : $("#charge_standard_add_edit #price"),
				tips : "请输入收费"
			}];
			
			if(!tool.validate(rules)) {
				return;
			}
			//转换启用字段
			p.isUse = (p.isUse? 1 : 0);
			//清除另一种收费模式的值
			if(p.paymentMode == 1) {
				 p.price = "";
			} else {
				p.monthPrice = "";
				p.dayPrice = "";
			}
			
			if(vm.isAdd) {
				//新增
				api.chargeStandardAdd(p).then(function(data) {
					tool.message({showClose: true, message: "新增收费类型成功", type: 'success'});
					vm.$emit('callback');
				    vm.cancel();
				});
			} else {
				//编辑
				api.chargeStandardEdit(p).then(function(data) {
					tool.message({showClose: true, message: "编辑收费类型成功", type: 'success'});
					vm.$emit('callback');
				    vm.cancel();
				});
			}
			
		},
		loadList : function() {
			let campusId = vm.campusId;
			//收费类型列表
			api.chargeTypeAll({campusId}).then(function(data) {
				vm.chargeTypeList = data.list;
			});
		}
	},
	created : function() {
		vm = this;
		dict = tool.getItem(lsKey.dict,true);
		vm.chargeWay = dict["charge_way"];
	}
}
</script>

<style lang="scss">
#charge_standard_add_edit {

	.el-input-number__increase{
		border-radius: 0 0.08rem 0 0 !important;
	}
	.el-input-number__decrease{
		border-radius: 0 0 0.08rem 0 !important;
	}
	.el-checkbox__label {
		font-size: 0.16rem;
		color: #666666;
	}
}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
	
	.panel {
		width: 6.2rem;
	}
	.form {
		padding: 0 0.3rem;
		font-size: 0.16rem;
		color: #666666;
	}
	.row {
		/*line-height: 0.5rem;*/
		padding: 0.07rem 0;
		line-height: 0.36rem;
	}
	.label {
		width: 0.9rem;
		display: inline-block;
		text-align: right;
		margin-right: 0.15rem;
		vertical-align: top;
		line-height: 0.36rem;
	}
	.label>span {
		color: red;
		display: inline-block;
		width: 0.1rem;
		position: relative;
		top: 0.02rem;
	}
	.explain {
		color: #999999;
		font-size: 0.14rem;
		line-height: 0.2rem;
		padding-left: 1.15rem;
		padding-top: 0.05rem;
	}
	.radio {
		position: relative;
		top: -0.01rem;
	}
</style>